<template>
    <div class="logistics">
        <div class="logistics-item active" v-for="(val,k) in list" v-if="k===0" >
            <div class="logistics-item-left">
                <div class="date">{{timeFormat(val.acceptTime,1)}}</div>
                <div class="time">{{timeFormat(val.acceptTime,2)}}</div>
            </div>
            <div class="logistics-item-right">
                <div class="status">{{statusFormat(val.state)}}</div>
                <div class="content">{{val.acceptStation}}</div>
            </div>
            <div class="logistics-item-circle">
                <i class="i-active" v-if="val.state==3"></i>
                <i class="i-ship" v-else-if="val.state==2"></i>
                <i class="i-receive" v-else="val.state==1"></i>
            </div>
            <div class="logistics-item__line"></div>
        </div>
        <div class="logistics-item" v-else-if="k===list.length-1" >
            <div class="logistics-item-left">
                <div class="date">{{timeFormat(val.acceptTime,1)}}</div>
                <div class="time">{{timeFormat(val.acceptTime,2)}}</div>
            </div>
            <div class="logistics-item-right">
                <div class="status">已揽件</div>
                <div class="content">{{val.acceptStation}}</div>
            </div>
            <div class="logistics-item-circle">
                <i class="i-receive"></i>
            </div>
            <div class="logistics-item__line"></div>
        </div>
        <div class="logistics-item" v-else>
            <div class="logistics-item-left">
                <div class="date">{{timeFormat(val.acceptTime,1)}}</div>
                <div class="time">{{timeFormat(val.acceptTime,2)}}</div>
            </div>
            <div class="logistics-item-right">
                <div class="status">{{statusFormat(val.state,val.acceptStation)}}</div>
                <div class="content">{{val.acceptStation}}</div>
            </div>
            <div class="logistics-item-circle">
                <i class="i-default"></i>
            </div>
            <div class="logistics-item__line"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "logistics",
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    // created() {
    //     console.log(this.list)
    //     return
    // },
    methods: {
        timeFormat(strTime,type=1) {
            var result = "";
            if(type===1){
                result = strTime.substring(0,strTime.indexOf(" "))
            }else if(type===2) {
                result = strTime.substring(strTime.indexOf(" "),strTime.length)
            }
            return result
        },
        statusFormat(state,acceptStation=""){
            var statusStr = "";
            if(state === "1"){
                statusStr = "已揽件"
            } else if(state === "2"){
                statusStr = "运输中"
            } else if(state === "3" ){
                statusStr = "已签收"
                if( acceptStation.indexOf("派件")>0){
                    statusStr = "派送中"
                }else if(state,acceptStation){
                    statusStr = "运输中"
                }
            } else {
                if(acceptStation.indexOf("派件")){
                    statusStr = "派送中"
                }else{
                    statusStr = "运输中"
                }
            }
            return statusStr;
        }
    }
}
</script>
